<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mymoney</title>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="element-ui/lib/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" type="text/css" href="css/public.css" />
    <link rel="stylesheet" type="text/css" href="css/proList.css" />
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .app {
            width: 1400px;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        function a() {
            var span1 = '';
            var uname = window.localStorage.getItem('uname');
            var status = window.localStorage.getItem('status');
            if (status == 0) {
                span1 = `<span class="fl">` + `欢迎您&nbsp:&nbsp&nbsp&nbsp&nbsp` + uname + `</span>`
                $("#mygxin").html(" ");
                $("#mygxin").append(span1);
                $("#login").hide();
                $("#reg").hide();
            }
        }
        $(function () {
            a();
        })
    </script>
</head>

<body>
    <!------------------------------head------------------------------>
    <div class="head">
        <div class="wrapper clearfix">
            <div class="clearfix" id="top">
                <h1 class="fl"><a href="index.html"><img src="img/logo.png" style="width: 387px;
                    height: 132px;
                    position: absolute;
                    margin-top: -34px;
                    margin-left: -100px;
                " /></a></h1>
                <div class="fr clearfix" id="top1">
                    <p class="fl">
                        <a href="mygxin.html" id="mygxin"></a>
                        <a href="login.html" id="login">登录</a>
                        <a href="reg.html" id="reg">注册</a>
                    </p>
                    <form action="#" method="get" class="fl">
                        <input type="text" placeholder="热门搜索：荔枝" />
                        <input type="button" />
                    </form>

                </div>
            </div>
            <ul class="clearfix" id="bott">
                <li><a href="index.html">首页</a></li>
                <li>
                    <a href="#">水果分类</a>
                    <div class="sList">
                        <div class="wrapper  clearfix">
                            <a href="bzproList.html">
                                <dl>
                                    <dd>瓜果类</dd>
                                </dl>
                            </a>
                            <a href="paint2.html">
                                <dl>
                                    <dd>浆果类</dd>
                                </dl>
                            </a>
                            <a href="bzproList.html">
                                <dl>
                                    <dd>柑橘类</dd>
                                </dl>
                            </a>
                            <a href="paint.html">
                                <dl>
                                    <dd>核果类</dd>
                                </dl>
                            </a>
                            <a href="paint.html">
                                <dl>
                                    <dd>坚果类</dd>
                                </dl>
                            </a>


                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">热销推荐</a>
                    <div class="sList2">
                        <div class="clearfix">
                            <a href="#">西瓜</a>
                            <a href="#">荔枝</a>
                            <a href="#">蓝莓</a>
                            <a href="#">香蕉</a>
                            <a href="#">杨梅</a>
                            <a href="#">葡萄</a>
                            <a href="#">哈密瓜</a>
                            <a href="#">芒果</a>
                            <a href="#">枇杷</a>
                            <a href="#">樱桃</a>
                            <a href="#">车厘子</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="bzproList.html">时令水果</a>
                    <div class="sList2">
                        <div class="clearfix">
                            <a href="bzproList.html">火龙果</a>
                            <a href="bzproList.html">西瓜</a>
                            <a href="bzproList.html">荔枝</a>
                            <a href="bzproList.html">李子</a>
                            <a href="bzproList.html">杨梅</a>
                            <a href="bzproList.html">百香果</a>
                            <a href="bzproList.html">车厘子</a>
                            <a href="bzproList.html">樱桃</a>
                            <a href="bzproList.html">枇杷</a>
                        </div>
                    </div>
                </li>
                <li><a href="#">限时特卖</a></li>
                <li><a href="#">国产优选</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 资金明细 -->
    <div id="app" class="app">
        <template>
            <!-- 统计图表 -->
            <div id="main" class="app" style="height: 500px;"></div>
            <!-- 数据列表 -->
            <div>
                <el-table :data="tableData" @selection-change="selected" header-align="center" align="center">
                    <el-table-column label="资金ID" width="250" prop="mid" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column label="类型" width="250" prop="mtype" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column label="金额" width="250" prop="mmoney" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column label="时间" width="350" prop="mtime" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column label="详情" width="250" prop="mnote" header-align="center" align="center">
                    </el-table-column>
                </el-table>
                <br>
            </div>
        </template>
    </div>

    <!--返回顶部-->
    <div class="gotop">
        <a href="cart.html">
            <dl>
                <dt><img src="img/gt1.png" /></dt>
                <dd>去购<br />物车</dd>
            </dl>
        </a>
        <a href="#" class="dh">
            <dl>
                <dt><img src="img/gt2.png" /></dt>
                <dd>联系<br />客服</dd>
            </dl>
        </a>
        <a href="mygxin.html">
            <dl>
                <dt><img src="img/gt3.png" /></dt>
                <dd>个人<br />中心</dd>
            </dl>
        </a>
        <a href="#" class="toptop" style="display: none;">
            <dl>
                <dt><img src="img/gt4.png" /></dt>
                <dd>返回<br />顶部</dd>
            </dl>
        </a>
        <p>400-800-8200</p>
    </div>
    <!--footer-->
    <div class="footer">
        <div class="top">
            <div class="wrapper">
                <div class="clearfix">
                    <a href="#2" class="fl"><img src="img/foot1.png" /></a>
                    <span class="fl">7天无理由退货</span>
                </div>
                <div class="clearfix">
                    <a href="#2" class="fl"><img src="img/foot2.png" /></a>
                    <span class="fl">15天免费换货</span>
                </div>
                <div class="clearfix">
                    <a href="#2" class="fl"><img src="img/foot3.png" /></a>
                    <span class="fl">满599包邮</span>
                </div>
                <div class="clearfix">
                    <a href="#2" class="fl"><img src="img/foot4.png" /></a>
                    <span class="fl">手机特色服务</span>
                </div>
            </div>
        </div>
        <p class="dibu">水果商城&copy;2022-2023公司版权所有 渝ICP备088800-44备0000111000号<br />
            违法和不良信息举报电话：188-8888-6666，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    </div>
</body>

</html>

<script type="text/javascript">
    var today = new Date();
    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth() + 1;
    var app1 = {};
    const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
    ];
    app1.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    app1.config = {
        rotate: 0,
        align: 'center',
        verticalAlign: 'middle',
        position: 'top',
        distance: 10,
        onChange: function () {
            const labelOption = {
                rotate: app1.config.rotate,
                align: app1.config.align,
                verticalAlign: app1.config.verticalAlign,
                position: app1.config.position,
                distance: app1.config.distance
            };
            myChart.setOption({
                series: [
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    }
                ]
            });
        }
    };
    const labelOption = {
        show: true,
        position: app1.config.position,
        distance: app1.config.distance,
        align: app1.config.align,
        verticalAlign: app1.config.verticalAlign,
        rotate: app1.config.rotate,
        formatter: '{c}元',
        fontSize: 14
    };
    const itemStyleOption = {
        borderRadius: [10, 10, 0, 0]
    };

    let s = new Vue({
        el: "#app",
        data: {
            tableData: [],
            moneyTotal: 0,
            multipleSelection: [],
            UserRemainMoney: 0,     //用户所剩资金
            UmoneyOut: [],          //半年来用户资金流出列表
            UmoneyIn: [],           //半年来用户资金流入列表
        },
        methods: {
            /**
             * 获得用户所剩资金
            */
            getUserRemainMoney() {

            },

            /**
             * 获得半年来用户资金记录
            */
            getUserMoneyRecords() {
                axios({
                    method: 'GET',
                    url: 'http://localhost:8088/umoney/getUserMoneyRecords',
                    params: {
                        year: todayYear,
                        month: todayMonth,
                        uid: window.localStorage.getItem("uid")
                    }
                }).then((res) => {
                    this.UmoneyIn = res.data[0];
                    this.UmoneyOut = res.data[1];
                    this.UserRemainMoney = window.localStorage.getItem('umoney');
                    this.myEchars();
                })



            },

            /**
             * 用Echars实现用户资金记录的图表
            */
            myEchars() {
                var main = document.getElementById("main");

                var myChart = echarts.init(main);

                window.onresize = function () {
                    myChart.resize();
                };

                var option;

                option = {
                    title: {
                        text: '资金分布',
                        subtext: '余额：￥ ' + this.UserRemainMoney + ' 元',
                        left: 'center',
                        top: 5
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        bottom: '20',
                        data: ['流入', '流出'],
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    toolbox: {
                        show: true,
                        // orient: 'vertical',
                        right: '20px',
                        // top: 'center',
                        top: 5,
                        feature: {
                            mark: { show: true },
                            // dataView: {show: true, readOnly: false},
                            magicType: { show: true, type: ['line', 'bar', 'stack'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.getFiveMonth(todayYear, todayMonth),
                            name: "时间/(月)",
                            nameTextStyle: {
                                fontSize: 14
                            },
                            axisLabel: {
                                textStyle: {
                                    fontSize: 14,
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            // type: 'value',
                            name: "数额/(元)",
                            nameTextStyle: {
                                fontSize: 14
                            },
                            axisLabel: {
                                textStyle: {
                                    fontSize: 14,
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '流入',
                            type: 'bar',
                            smooth: true,
                            barGap: 0,
                            label: labelOption,
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [1,2,3,4,5,8],
                            data: this.UmoneyIn,
                            itemStyle: itemStyleOption
                        },
                        {
                            name: '流出',
                            type: 'bar',
                            smooth: true,
                            label: labelOption,
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [3,6,8,10,5,9],
                            data: this.UmoneyOut,
                            itemStyle: itemStyleOption
                        }
                    ]
                };


                option && myChart.setOption(option);
            },


            uMoney() {
                axios.get('http://localhost:8088/umoney/getUMoneyList1/' + window.localStorage.getItem("uid")).then(res => {
                    this.tableData = res.data;
                    console.log(res.data);
                    console.log("资金明细" + this.tableData);
                })
            },
            //返回的参数为选中行对应的对象
            selected: function (selection) {
                this.multipleSelection = selection;
                this.moneyTotal = 0;
                //此处不支持forEach循环，只能用原始方法了
                for (var i = 0; i < selection.length; i++) {
                    //判断返回的值是否是字符串
                    if (typeof selection[i].goodTotal == 'string') {
                        selection[i].goodTotal = parseInt(selection[i].goodTotal);
                    };
                    this.moneyTotal += selection[i].price;
                }
            },
            //获得
            getFiveMonth(todayYear, todayMonth) {
                var list = [];
                for (let i = 0; i < 6; i++) {
                    if (todayMonth <= 0) {
                        todayMonth = (12 + todayMonth);
                        todayYear -= 1;
                    }
                    list.unshift(todayYear + "年" + todayMonth + "月");
                    todayMonth -= 1;
                }
                return list;
            }
        },
        created() {
            this.uMoney();
        },
        mounted() {
            this.getUserMoneyRecords();
        }
    })
</script>